"use client";

import React, { useState } from "react";
import { Form, Input, Button, message, Modal, Card } from "antd";
import { useRouter, useParams } from "next/navigation";
import api from "../../../utils/api";
import { useUser } from "../../../context/userContext";

const ReportUserPage = () => {
  const router = useRouter();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const { user } = useUser();
  const params = useParams();
  const reportedUserId = params.authorId;

  const [modalVisible, setModalVisible] = useState(false); // 控制弹窗显示

  const onFinish = async (values) => {
    setLoading(true);
    try {
      const response = await api.post(
        "/reports",
        {
          reporter: user.id,
          type: "user",
          reportedItemId: parseInt(reportedUserId as string, 10),
          reason: values.reason,
        },
        {
          headers: {
            Authorization: `Bearer ${user.access_token}`,
          },
        }
      );

      if (response.data.success) {
        message.success("举报成功");
        router.back();
      } else {
        setModalVisible(true);
      }
    } catch (error) {
      console.error("举报失败:", error);
      setModalVisible(true);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
      <Card
        style={{
          background: "#fff",
          borderRadius: "8px",
          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
        }}
      >
        <Button
          type="primary"
          style={{
            backgroundColor: "#1890ff",
            color: "white",
            borderRadius: "4px",
            border: "none",
            marginBottom: "20px",
          }}
          onClick={() => router.back()}
        >
          返回
        </Button>

        <h1 style={{ fontSize: "24px", fontWeight: "bold", marginTop: "10px" }}>
          举报用户
        </h1>

        <Form
          form={form}
          name="reportUser"
          onFinish={onFinish}
          initialValues={{ reason: "" }}
          scrollToFirstError
        >
          <Form.Item
            label={
              <span style={{ fontSize: "18px", marginBottom: "5px" }}>
                举报原因
              </span>
            }
            name="reason"
            style={{ marginTop: "20px", width: "100%" }}
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 24 }}
            rules={[{ required: true, message: "请输入举报原因" }]}
          >
            <Input.TextArea rows={4} style={{ fontSize: "16px" }} />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              style={{
                backgroundColor: "#1890ff",
                color: "white",
                borderRadius: "4px",
                border: "none",
                marginTop: "20px",
                width: "30%",
                fontSize: "16px",
              }}
            >
              提交举报
            </Button>
          </Form.Item>
        </Form>
      </Card>

      {/* 失败弹窗 */}
      <Modal
        title="举报失败"
        open={modalVisible}
        onOk={() => {
          setModalVisible(false);
          router.back(); // 举报失败后返回上一页
        }}
        onCancel={() => setModalVisible(false)}
        okText="返回"
        cancelText="关闭"
      >
        <p>举报失败，请稍后重试。</p>
      </Modal>
    </div>
  );
};

export default ReportUserPage;
